<template>
	<view id="police">
		<view class="topSection">
			<image src="../../static/images/top3.png" class="topImg"></image>
			<view class="title">
				<uni-icons class='backBtn' @tap="indexBtn" type="back" size="22" color="#fff"></uni-icons>
				{{title}}
			</view>
			<uni-easyinput class="searchInput" suffixIcon="search" 
			v-model="value" placeholder="请输入关键词搜索" @iconClick="toSearch"></uni-easyinput>
			<view class="btns">
				<view class="btnsBox">
					<view class="btn" @tap="toGuide">
						<image src="../../static/images/police1.png" mode="widthFix" class="btn1"></image>
						<view class="">政策导览</view>
					</view>
					<view class="btn" @tap="toActivity">
						<image src="../../static/images/police2.png" mode="widthFix" class="btn1"></image>
						<view class="">热点资讯</view>
					</view>
					<view class="btn" @tap="toRecuit">
						<image src="../../static/images/police3.png" mode="widthFix" class="btn1"></image>
						<view class="">招聘信息</view>
					</view>	
				</view>
			</view>
		</view>
		<view class="map">
			<map style="width: 100vw; height: 64vh;" 
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="covers"
			:polyline='polyline'
			>
			</map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				id:0, // 使用 marker点击事件 需要填写id
				title: '益企看',
				latitude: 31.519132,
				longitude: 121.036138,
				// latitude: 31.460021,
				// longitude: 121.072244,
				covers: [],
				polyline: [
					{
					  //指定一系列坐标点，从数组第一项连线至最后一项
					  points: [
						{ latitude: 31.460021, longitude: 121.072244 },
						{ latitude: 31.465119, longitude: 121.067881 },
						{ latitude: 31.466539, longitude: 121.071662 },
						{ latitude: 31.466138, longitude: 121.071968 },
						{ latitude: 31.465755, longitude: 121.071284 },
						{ latitude: 31.464352, longitude: 121.071968 },
						{ latitude: 31.465101, longitude: 121.073398 },
						{ latitude: 31.462086, longitude: 121.075809 },
						{ latitude: 31.460021, longitude: 121.072244 },						
					  ],
					  color: "#0000AA", //线的颜色
					  width: 2, //线的宽度
					  dottedLine: true, //是否虚线
					  arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
					},
					{
					  //指定一系列坐标点，从数组第一项连线至最后一项
					  points: [						
						{ latitude: 31.507959, longitude: 121.038667 },
						{ latitude: 31.502854, longitude: 121.031687 },
						{ latitude: 31.493872, longitude: 121.038347 },
						{ latitude: 31.500124, longitude: 121.046127 },
						{ latitude: 31.507959, longitude: 121.038667 },
					  ],
					  color: "#0000AA", //线的颜色
					  width: 2, //线的宽度
					  dottedLine: true, //是否虚线
					  arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
					},
					{
					  //指定一系列坐标点，从数组第一项连线至最后一项
					  points: [						
						{ latitude: 31.482788, longitude: 121.069538 },
						{ latitude: 31.478003, longitude: 121.062882 },
						{ latitude: 31.47392, longitude: 121.066353 },
						{ latitude: 31.478871, longitude: 121.073941 },
						{ latitude: 31.482788, longitude: 121.069538 },
					  ],
					  color: "#0000AA", //线的颜色
					  width: 2, //线的宽度
					  dottedLine: true, //是否虚线
					  arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
					},
				],
			}
		},
		onLoad() {
			this.getMapList()
		},
		methods: {
			markerHandle(e) {
				console.log(e, 'e')
				// return
				let marker;
				this.covers.forEach((item)=>{
					if(item.id!=e.detail.markerId){
						item.callout.display = "NONE"
					}else{
						console.log(item, 'item')
						marker = item;
					}
				})
				marker.callout.display = "NONE"
				return
				if(marker.callout.display!="BYCLICK"){
					marker.callout.display = "BYCLICK"
				}else{
					marker.callout.display = "NONE"
				}
			},
			toSearch() {				
				if(this.value) {
					uni.navigateTo({
						url: '/pages/searchList/searchList?value=' + this.value,
					})					
				} else {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none'
					})
				}
			},
			toRecuit() {
				uni.navigateTo({
					url: '/pages/recruit/recruit'
				})
			},
			toGuide() {
				uni.navigateTo({
					url: '/pages/policeGuide/guideType'
				})
			},
			toActivity() {
				uni.navigateTo({
					url: '/pages/activity/activity'
				})
			},
			indexBtn() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			getMapList() {
				uni.request({
					url: '/sf_enterprise_service/business/maplocation/list',
					method: 'GET',
					success: (res) => {		
						console.log(res, 'res??')	
						this.covers = []					
						
						// contact:"53673869"
						// id:1
						// lat:"31.521542"
						// lon:"121.048731"
						// name:"供电公司"
						res.data.data.forEach(item => {
							let marker =  {
								id: item.id,
								latitude: item.lat,
								longitude: item.lon,
								iconPath: '../../static/dot.png',
								joinCluster: true, 
								// label: {
								// 	content: item.name
								// },
								callout: { // 自定义标记点上方的气泡窗口
									content: `${item.name} \n 联系方式：${item.contact}`,
									display: 'BYCLICK', // 'BYCLICK':点击显示; 'ALWAYS':常显
									padding: 5,
									textAlign: 'center',
									color: '#C2874D',
									borderRadius: 4
								},
							}							
							this.covers.push(marker)
						})
						
					},
				})
			},
		}
	}
</script>

<style>
	.topImg {
		width: 100%;
		height: 35vh;
		z-index: 1;
		position: absolute;
	}
	.searchInput {
		z-index: 2;
		position: relative;
		top: 2vh;
		width: 90%;
		margin: 0 auto;
		.is-input-border {
			border-radius: 24px;
		}
		.uni-easyinput__content-input {
			padding-left: 15px !important;
		}
	}
	
	.btns {
		/* height: 20vh; */
		/* border: 1px solid green; */
		z-index: 3;
		position: relative;
		top: 6vh;
		
	}
	.btnsBox {
		display: flex;
		justify-content: space-around;	
	}
	.btn {
		/* border: 1px solid blue; */
		width: 20vw;
		font-size: 30rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;		
	}
	.btn image {
		width: 15vw;
		margin-bottom: 6rpx;
	}
	.map {
		position: fixed;
		bottom: 0;
	}
	.title {
		line-height: 50px;
		text-align: center;
		z-index: 2; 
		position: relative;
		font-weight: bold;
		color: #fff;
	}
	.backBtn {
		position: absolute;
		left: 10px;
	}
</style>
